<template>
  <div class="home">
    <!-- 上方区域 -->
    <header class="header">
      <div class="title">主页</div>
      <button @click="logout" >登出</button>
    </header>

    <!-- 中间区域 -->
    <div>
      <NotificationCarousel/>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user.ts';
import LineChart from '@/components/LineChart.vue';
import BarChart from '@/components/BarChart.vue';
import axios from '@/api/request.ts';
import NotificationCarousel from "@/components/NotificationCarousel.vue";

const router = useRouter();
const userStore = useUserStore();

const activityFrequencyData = ref<Record<string, number>>({});
const participantFrequencyData = ref<Record<string, number>>({});


const logout = () => {
  userStore.logout();
  router.push('/');
};

const fetchActivityFrequencyData = async () => {
  try {
    const activitiesResponse = await axios.get('/activities');
    const participantsResponse = await axios.get('/activities/participants'); // 修改这里为正确的API端点

    console.log('Activities Response:', activitiesResponse.data);
    console.log('Participants Response:', participantsResponse.data);

    const activities = activitiesResponse.data;
    const userActivities = participantsResponse.data;

    // 处理活动频率数据
    const activityCountByDate: Record<string, number> = {};
    const participantCountByActivity: Record<string, number> = {};

    activities.forEach((activity: any) => {
      if (activity.time) {
        const date = new Date(activity.time).toISOString().split('T')[0];
        if (activityCountByDate[date]) {
          activityCountByDate[date]++;
        } else {
          activityCountByDate[date] = 1;
        }
      }
    });

    userActivities.forEach((userActivity: any) => {
      const activity = activities.find((activity: any) => activity.activityId === userActivity.activityId);
      if (activity) {
        const activityName = activity.name;
        if (participantCountByActivity[activityName]) {
          participantCountByActivity[activityName]++;
        } else {
          participantCountByActivity[activityName] = 1;
        }
      }
    });

    activityFrequencyData.value = activityCountByDate;
    participantFrequencyData.value = participantCountByActivity;

    console.log('Activity Frequency Data:', activityFrequencyData.value);
    console.log('Participant Frequency Data:', participantFrequencyData.value);
  } catch (error) {
    console.error('Error fetching activity frequency data:', error);
  }
};

onMounted(async () => {
  await fetchActivityFrequencyData();
});
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #f0f2f5;
  border-bottom: 1px solid #dcdcdc;
}

.title {
  font-size: 24px;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.charts {
  display: flex;
  flex: 1;
  padding: 16px;
  background-color: #fff;
  border-top: 1px solid #dcdcdc;
}

.chart-container {
  flex: 1;
  padding: 16px;
}
</style>
